import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import moment from 'moment'
import OperatorConstant from "../../utils/OperatorConstant";

const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';


export default Form.create({wrappedComponentRef: true})(class ClaimList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: true,
            type: "",
        }
    }



    columns = [
        {title: '认领人', dataIndex: 'creatorName', key: 'creator', width: '150px'},
        {title: '认领时间', dataIndex: 'createtime', key: 'createtime', width: '150px'},
        {title: '认领金额', dataIndex: 'claimamount', key: 'claimamount', width: '150px'},
        {title: '认领客户', dataIndex: 'cstName', key: 'cstName', width: '150px'},
        {title: '业务经理',dataIndex: 'manager',key: 'manager', width: '150px'},
        {title: '操作', width: '10    0px', key: 'key_oprator',

            render: (text, record, index) => {
                let deleteButton =
                    <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                        this.props.dispatch({
                            type: 'claim/deleteClaimForex',
                            payload: {
                                forexId: record.forexid,
                                claimId: record.id,
                                onSuccess:()=>{
                                    this.props.dispatch({type: 'foreignExchangeManage/getForexById', payload: {id: record.forexid}});
                                }

                            }
                        });
                    }} okText="是" cancelText="否">
                        <a href=" ">删除</a >
                    </Popconfirm>;
                deleteButton = (this.props.type ==  OperatorConstant.forex_submit ? deleteButton : "");

                return (
                    <span>
                        {deleteButton}
                     </span>
                );

            }
        }
    ];


    render() {
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.claim.page.size,
            total: this.props.claim.page.totalRow,
            showSizeChanger: true,
            current: this.props.claim.page.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.claim.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'claim/getClaimForexList',
                    payload: {
                        forexId: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.claim.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'claim/getClaimForexList',
                    payload: {
                        forexId: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                    }
                });
            }
        }

        return (
            <Tabs>
                <TabPane tab="认领记录" key="2">
                    <Row>
                        <Col>
                            <div>
                                <Table dataSource={this.props.claim.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination}/>
                            </div>
                        </Col>
                    </Row>
                </TabPane>
            </Tabs>
        );
    }
})


